<template>
  <div class="recruit_box">
    <div class="info_chang_search">
      <div class="tabs">当前位置：<span @click="$router.push({name: 'home'})">首页</span>>人才招聘</div>
      <search-box></search-box>
    </div>
    <div class="box_info_contents">
      <div class="recruit_list" v-for="(item,index) in inviteList" :key="index">
        <div class="titles">{{item.title}}</div>
        <div class="tips">
          <div>工作地点：{{item.address}}</div>
          <div>学历：{{ item.education }}</div>
          <div>薪资：{{item.personally?'面议':item.compensation}}</div>
        </div>
        <div class="content">{{item.intro}}</div>
      </div>
    </div>
    <div class="block">
      <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="limit"
          layout="total, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import SearchBox from "@/components/searchBox";
import {invite} from "@/api/apis";

export default {
  name: "recruit",
  components: {SearchBox},
  data(){
    return{
      currentPage:1,
      limit:4,
      total:0,
      inviteList:[]
    }
  },
  mounted() {
    this.getInvite()
  },
  methods:{
    handleCurrentChange(e){
      this.currentPage = e
      this.getInvite()
    },
    getInvite(){
      let data = {
        page:this.currentPage,
        limit:this.limit
      }
      invite(data).then(res=>{
        this.inviteList = res.data.data
        this.total = res.data.total
      })
    }
  }
}
</script>

<style scoped lang="less">
.recruit_box {
  width: 1200px;
  margin: 0 auto;
  padding: 11px 0 51px;
  min-height: calc(100vh - 62px);

  .info_chang_search {
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;

    .tabs {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }
  }
  .box_info_contents{
     margin-top: 10px;
      .recruit_list{
        padding: 20px 0 10px;
        border-bottom: 1px solid #C7C7C7;
        .titles{
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #000000;
        }
        .tips{
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000000;
          margin: 17px 0;
          display: flex;
          div{
            margin-right: 86px;
          }
        }
        .content{
          white-space: pre-wrap;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 24px;
          color: #000000;
        }
      }
  }
}
</style>
